<!--
* 
* @file: index.html
* 
* 
* 
-->
<script language="JavaScript"> 
    function getCookie(c_name)
    {
        if (document.cookie.length>0)
          {
          c_start=document.cookie.indexOf(c_name + "=")
          if (c_start!=-1)
            { 
            c_start=c_start + c_name.length+1 
            c_end=document.cookie.indexOf(";",c_start)
            if (c_end==-1) c_end=document.cookie.length
            return unescape(document.cookie.substring(c_start,c_end))
            } 
          }
        return ""
    }
    retcook=getCookie('AGraph_AJQCDJOWN63628df')
    if (retcook=="")
    {
        window.location.href="/login";
    }else
    {
    }
    </script>
   
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
    {% load static %}
    <title>轩辕智图</title>
    <script type="text/javascript" src="{% static 'grap_view_js/thirdPart/d3.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'grap_view_js/thirdPart/saveSvgAsPng.js' %}"></script>
    <script type="text/javascript" src="{% static 'grap_view_js/thirdPart/jquery-3.3.1.js' %}"></script>
    <script type="text/javascript" src="{% static 'grap_view_js/thirdPart/smartMenu.js' %}"></script>

    <link rel="stylesheet" href="{% static 'grap_view_css/font-awesome-4.7.0/css/font-awesome.min.css' %}">
    <link rel="stylesheet" href="{% static 'grap_view_css/style.css' %}">
    <link rel="stylesheet" href="{% static 'grap_view_css/smartMenu.css' %}" >
    <link rel="shortcut icon" href="{% static 'grap_view_image/logo.ico' %}" type="grap_view_image/x-icon" />
    <link rel="stylesheet" href= "{% static 'grap_view_layui/css/layui.css' %}"  media="all">
    <script src="{% static 'grap_view_layui/layui.js' %}"></script>
</head> 

<body>

    <svg id="container">
        <!-- 网络图 -->
        <g id="network-graph"></g>
        <!-- 柱状图 -->
        <g id="bar-graph"></g>  
    </svg>
    <div id="top-tool-bar">
        <div id="logo"></div>
        <button class="top-menu-item" id="download-demo"><i class="fa fa-download"></i> 下载数据模板</button>
        <button class="top-menu-item" id="upload-data"><i class="fa fa-upload"></i> 上传数据</button>
        <button class="top-menu-item" id="download-data"><i class="fa fa-download"></i> 导出当前数据</button>
        <button class="top-menu-item" id="download-img"><i class="fa fa-share"></i> 导出当前图片</button>
        <button class="top-menu-item" id="save-data"><i class="fa fa-download"></i> 保存到知识库</button>

        <div id="top-right-bar">
            <button id="stop-button"><div id="network-status"></div><div id="stop-button-text">停止布局</div></button>
            <div id="search-line-layout">
                <input type="text" name="" id="search-lineedit">
                <button id="search-button"><i class="fa fa-search"></i></button>
            </div>
            <button class="top-tool-button" id="allgraph-button"><i class="fa fa-comments"></i></button>
            <button class="top-tool-button" id="public-data-button"><i class="fa fa-database"></i></button>
            <button class="top-tool-button" id="route-button"><i class="fa fa-road"></i></button>
            <button class="top-tool-button" id="setting-button"><i class="fa fa-gear"></i></button>
            <button class="top-tool-button" id="screen-button"><i class="fa fa-expand" id="screen-switch"></i></button>

        </div>  
    </div>



    <div id="info-layout">
        <div id="network-info">
            <p>
                <strong>视图统计:</strong>
            </p>
            <p id="node-num"></p>
            <p id="link-num"></p>
        </div>
        <div id="node-info">
            <p><strong>节点属性:</strong></p>
            <p id="node-index"></p>
            <p id="node-label"></p>
            <p id="node-name"></p>
        </div>
        <div id="link-info">
            <p><strong>关系属性:</strong></p>
            <p id="link-label"></p>
            <p id="link-source"></p>
            <p id="link-target"></p>
        </div>
    </div>
    <div id="tips-layout">
        <div id="tips-title">轩辕提示板</div>
        <div id="tips-content"></div>
        <div id="tips-switch-layout">
            {% for _ in tip_list %}
                <div class="tip-switch" id={{ forloop.counter0 }}></div>
            {% endfor %}
        </div>
    </div>
    <div id="color-layout">
        <div><i id="color-marker" class="fa fa-map-pin"></i></div>
        <div id="color-bar"></div>
    </div>
    <div id="left-tool-bar">
    	<div id="tool-bar">
	        <button id="zoom-out" title="放大"><i class="fa fa-plus-circle"></i></button>
	        <button id="zoom-in" title="缩小"><i class="fa fa-minus-circle"></i></button>
	        <button id="zoom-reset" title="1：1"><i class="fa fa-arrows-h"></i></button>
	        <button id="rotate" title="顺时针旋转"><i class="fa fa-repeat"></i></button>
	        <button id="rerotate" title="逆时针旋转"><i class="fa fa-undo"></i></button>
	    </div>
        <hr />
	    <div id="show-control-bar">
	    	<button id="info-show" title="信息面板" class="high-light"><i class="fa fa-info-circle"></i></button>
            <button id="bar-graph-show" title="分类统计图"><i class="fa fa-bar-chart"></i></button>	
	        <button id="node-button" title="节点文字" class="high-light"><i class="fa fa-dot-circle-o"></i></button>
			<button id="link-button" title="关系文字"><i class="fa fa-link"></i></button>
            <button id="marker-button" title="箭头" class="high-light"><i class="fa fa-location-arrow"></i></button>
            <button id="tips-button" title="贴心小提示" class="high-light"><i class="fa fa-gratipay"></i></button>
	    </div>
        <button id="color-button" type=""></button>
    </div>
    <div id="allgraph-box" class="right-box">
        <div id="comments-layout">
            <div id="submit-layout">
                <h2>属性魔方</h2>
                <div id="node-all"></div>
                 <div id="label-all"></div>             
            </div>
         </div>

    </div>
    <div id="public-data-box" class="right-box" >
        <table id="public-data-table">
            <tbody id="public-data-stat">

            </tbody>
        </table>
    </div>
 

    <div id="setting-box" class="right-box">
        <table id="setting-table">
            <tbody>
				<tr class="box-title">
		            <td colspan=2>网络图设置</td>
		        </tr>
                <tr>
                    <td>节点斥力</td>
                    <td>
                        <input type="range" name="points" id="repulsion" min="100" max="3000" step="10" value="300" />
                    </td>
                </tr>
                <tr>
                    <td>连接强度</td>
                    <td>
                        <input type="range" name="points" id="gravitation" min="0.01" max="1" step="0.05" value="0.5" />
                    </td>
                </tr>
                <tr>
                    <td>节点缩放比例</td>
                    <td>
                        <input type="range" name="points" id="nodes-size" min="0.1" max="10" step="0.1" value="1" />
                    </td>
                </tr>
                <tr>
                    <td>边宽缩放比例</td>
                    <td>
                        <input type="range" name="points" id="links-width" min="0.1" max="10" step="0.1" value="1" />
                    </td>
                </tr>
                <tr>
                    <td>边类型</td>
                    <td>
                        <button id="slink-button" class="link-type high-light" value="slink"></button>
                        <button id="clink-button" class="link-type" value="clink"></button>
                        <button id="hlink-button" class="link-type" value="hlink"></button>
                        <button id="vlink-button" class="link-type" value="vlink"></button>
                    </td>
                </tr>
                <tr>
                    <td>布局方式</td>
                    <td>
                        <button id="force-button" class="layout-style high-light" value="0"><i class="fa fa-snowflake-o"></i></button>
                        <button id="radius-button" class="layout-style" value="1"><i class="fa fa-circle-o"></i></button>
                        <!--button id="tree-button" class="layout-style" value="2"><i class="fa fa-tree"></i></button-->
                    </td>
                </tr>
                <!--tr>
                    <td>分析模式</td>
                    <td>
                        <button id="analyse-mode" title="切换分析模式">数据分析&nbsp&nbsp&nbsp&nbsp<i id="analyse-switch" class="fa fa-toggle-off"></i>&nbsp&nbsp&nbsp&nbsp场景分析</button>
                    </td>
                </tr-->
                <tr>
                    <td>纯色背景</td>
                    <td>
                        <input type="color" name="" id="background-color-button" value="#027080">
                    </td>
                </tr>
                <tr>
                    <td>图片背景</td>
                    <td>
                        <select id="background-select">
                            <option>未选择</option>
                            {% for background in background_list %}
                                <option>{{ background }}</option> 
                            {% endfor %}
                        </select>
                    </td>
                </tr>
            </tbody>
            <!--tbody>
				<tr class="box-title">
		            <td colspan=2>节点设置</td>
		        </tr>
                <tr>
                    <td>节点大小</td>
                    <td>
                        <input type="range" name="points" id="node-size" min="0" max="100" step="1" value="15" />
                    </td>
                </tr>
                <tr>
                    <td>节点透明度</td>
                    <td>
                        <input type="range" name="points" id="node-opacity" min="0" max="1" step="0.01" value="1" />
                    </td>
                </tr>
            </tbody>
            <tbody>
				<tr class="box-title">
		            <td colspan=2>边设置</td>
		        </tr>
                <tr>
                    <td>边宽度</td>
                    <td>
                        <input type="range" name="points" id="link-width" min="0" max="20" step="0.1" value="1" />
                    </td>
                </tr>        
            </tbody-->
        </table>
    </div>
    <div id="route-box" class="right-box">
        <table id="route-table">
            <tbody>
				<tr class="box-title">
		            <td colspan=2>路径探寻</td>
		        </tr>
                <tr>
                    <td>起点name</td>
                    <td>
                        <input type="text" id="source-node-index"/>
                    </td>
                </tr>
                <tr>
                    <td>终点name</td>
                    <td>
                        <input type="text" id="target-node-index"/>
                    </td>
                </tr>
                <!--tr>
                    <td>路径长度</td>
                    <td>
                        <select class="selectbox"  id='step-bet-nodes'>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                            <option value="6">6</option>
                          </select>
                  </td>
                </tr>
                <tr>
                    <td>方向</td>
                    <td>
                        <select class="selectbox"  id='step-bet-nodes'>
                            <option value="0">正向</option>
                            <option value="1">逆向</option>
                            <option value="2">不限</option>
                          </select>
                  </td>
                </tr-->
                <tr>
                    <td id="route-button-line" colspan="2"><button id="begin-find">开始查找</button></td>
                </tr>
            </tbody>
        </table>
    </div>
    <div id="labels-bar">
        <ul></ul>
    </div>
     <div id="upload-layout">
        <div id="upload-top-layout">
            <div id="file-title">导入json数据</div>
            <div id="file-close">×</div>
        </div>
        <div id="info-file">
            <div id="file-item">
                <div id="file-name"></div>
                <div id="file-state"></div>
            </div>
        </div>
        <input type="file" id="file-input" enctype="multiple/form-data" method="post"/>
        <button id="select-file" class="file-button">选择文件</button>
        <div>
            <button id="upload-button" class="file-button">上传</button>
            <button id="close-button" class="file-button">关闭</button>
        </div>
    </div>
    <table id="attr-table">
        <tbody>
            <tr><td colspan=2>节点属性设置</td></tr>
            <tr>
                <td>ID:</td>
                <td><input type="text" id="create-id"></td>
            </tr>
            <tr>
                <td>label:</td>
                <td><input type="text" id="create-label"></td>
            </tr>
            <tr>
                <td>name:</td>
                <td><input type="text" id="create-name"></td>
            </tr>
            <tr>
                <td colspan=2>
                    <div>
                        <button id="create-confirm" class="attr-button">确认</button>
                        <button id="create-cancel" class="attr-button">取消</button>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
    <script>
        var layer;
        layui.use(['layer', 'form'], function () {
            layer = layui.layer
        });
        </script>
      <script>
    $('#node-num').on('click', function(){ //监听按钮事件
      //layer.msg(  "<em style='color:black'>" + '3333' + "</em>", {icon: 5});
    
      });

      </script>
    <script type="text/javascript">
    	var data = {{ default_data|safe }};
        var tip_list = {{ tip_list|safe }};
        var background_list = {{ background_list|safe }};
    </script>
    <script type="text/javascript" src="{% static 'grap_view_js/index.js' %}"></script>
    <script type="text/javascript" src="{% static 'grap_view_js/tools.js' %}"></script>
    <script type="text/javascript" src="{% static 'grap_view_js/showControl.js' %}"></script>
    <script type="text/javascript" src="{% static 'grap_view_js/upOrDownload.js' %}"></script>
    <script type="text/javascript" src="{% static 'grap_view_js/transform.js' %}"></script>
    <script type="text/javascript" src="{% static 'grap_view_js/barGraph.js' %}"></script>
    <script type="text/javascript" src="{% static 'grap_view_js/selectFunction.js' %}"></script>
    <script type="text/javascript" src="{% static 'grap_view_js/treeGraph.js' %}"></script>
    <script type="text/javascript" src="{% static 'grap_view_js/networkGraph.js' %}"></script>
    <script type="text/javascript" src="{% static 'grap_view_js/tools/route.js' %}"></script>
</body>
</html>
